// 调控指数第一步数据
import React, { useImperativeHandle, useState } from "react";
import { Input, Button, Table } from "antd";
import { useTranslation } from "react-i18next";
import { PlusCircleOutlined } from "@ant-design/icons";
import searchIcon from "../../../../assets/images/dapp/search.svg";
import tipsIcon from "../../../../assets/images/dapp/tips.svg";
import {AddToken} from './addToken'
const { Search } = Input;

export const RegulationDataList = React.forwardRef(({}, ref) => {
    const { t } = useTranslation();
    const [visible, setVisible] = useState(false);
    const [showSearchInput, setShowSearchInput] = useState(false);
    const [deviceType, setDeviceType] = useState(
      sessionStorage.getItem("deviceType")
    );
  const columns = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn1"),
      dataIndex: "b",
      key: "b",
      align: "center",
      render: (text, record) => <div className="token-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn2"),
      dataIndex: "c",
      key: "c",
      align: "left",
      render: (text, record) => <div className="dark-text">{text} </div>,
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn3"),
      dataIndex: "d",
      key: "d",
      align: "center",
      render: (text, record) => <div className="dark-text">{text}</div>,
    },
   
    {
      title: t("dappIndexRegulation.regulationControlColumn4"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn4"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn5"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn6"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn7"),
      dataIndex: "g",
      key: "g",
      align: "center",
      width: 100,
      render: (text, record) => (
        <div className="bk-text">
          <Input className={Number(text) > 0 ? "up-text" : "down-text"} defaultValue={parseFloat(text).toFixed(2)}>
          
          </Input>
          {/* <span className={Number(text) > 0 ? "up-text" : "down-text"}>
            {parseFloat(text).toFixed(2)}
          </span> */}
        </div>
      ),
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn8"),
      dataIndex: "h",
      key: "h",
      align: "center",
      render: (text, record) => (
        <div className={Number(text) > 0 ? "up-text" : "down-text"}>
          {parseFloat(text).toFixed(2)}%
        </div>
      ),
    },
    {
      title: t("dappIndexRegulation.regulationControlColumn9"),
      dataIndex: "i",
      key: "i",
      align: "center",
      render: (text, record) => (
        <div className={Number(record.g) > 0 ? "up-text" : "down-text"}>
          {text}
        </div>
      ),
    },
  ];

  const dataSource = [
    {
      a: "1",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "4",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "5",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: -5,
      h: -5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "6",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 15.0,
      h: 15.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "7",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "8",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: -25,
      h: -25.0,
      i: "-5%/10%=-50.0000%",
    },
    {
      a: "9",
      b: "ETH",
      c: "PancakeSwap V3",
      d: "/USDT",
      e: "20497.0419",
      f: "20497.0419",
      g: 5.0,
      h: 5.0,
      i: "-5%/10%=-50.0000%",
    },
  ];

  const handleCloseAddToken = () => {
    setVisible(false);
  }

  const onSearch = () => {
    console.log("搜索");
  }

  return (
    <div className="regulatuion-modal-data-list">
      <div className="top-row">
        <div className="left">
          <Button icon={<PlusCircleOutlined />} className="add-token-btn" onClick={() => {setVisible(true)}}>
            {t("dappIndexRegulation.addToken")}
          </Button>
          {/* {
            showSearchInput ?
            <Search
            placeholder="input search text"
            allowClear
            size="small"
            onSearch={onSearch}
            className="search-input"
          />:<img src={searchIcon} className="search-icon" onClick={() => {setShowSearchInput(true)}}></img>
          }
           */}
        </div>
        <div className="right">
          <div className="label">
            {t("dappIndexRegulation.currentExponentialLable")}:
          </div>
          <div className="value">100,000,000.00000000</div>
        </div>
      </div>
      <div className="tips-box">
        <img src={tipsIcon} className="tips-icon"></img>
        <div className="tip-text">{t("dappIndexRegulation.tips")}</div>
      </div>
      <div className="table-box">
        <Table
          size="small"
          bordered={false}
          pagination={false}
          columns={columns}
          dataSource={dataSource}
          scroll={deviceType == 'Mobile' ? {x: 'max-content'}:null}
        ></Table>
      </div>
      <AddToken visible={visible} handleCloseAddToken={handleCloseAddToken}/>
    </div>
  );
});
